<%@ page import="com.ychs.entity.Member" %>
<%@ page import="com.ychs.entity.College" %>
<%@ page import="com.ychs.entity.Major" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String id = request.getParameter("id");
    String name = request.getParameter("name");
    String code = request.getParameter("code");
    String sex = request.getParameter("sex");
    String grade = request.getParameter("grade");
    String nativePlace = request.getParameter("nativePlace");
    String phone = request.getParameter("phone");
    String collegeId = request.getParameter("college");
    String majorId = request.getParameter("major");
    String schoolJob = request.getParameter("schoolJob");
    String joinDate = request.getParameter("joinDate");
    String state = request.getParameter("state");
    String labJob = request.getParameter("labJob");
    String remark = request.getParameter("remark");

    Member member = new Member();
    member.setId(Integer.parseInt(id));
    member.setName(name);
    member.setCode(code);
    member.setSex(Integer.parseInt(sex));
    member.setGrade(Integer.parseInt(grade));
    member.setNativePlace(nativePlace);
    member.setPhone(phone);

    College college = new College();
    college.setId(Integer.parseInt(collegeId));
    Major major = new Major();
    major.setId(Integer.parseInt(majorId));

    member.setCollege(college);
    member.setMajor(major);
    member.setSchoolJob(schoolJob);
    member.setJoinDate(joinDate);
    member.setState(state);
    member.setLabJob(labJob);
    member.setRemark(remark);

    pageContext.setAttribute("member",member);
%>
<div class="layuimini-container">
    <div class="layuimini-main">
        <div class="layui-form layuimini-form">

            <form class="layui-form" action="" lay-filter="formFilter">
                <div class="layui-form-item">
                    <label class="layui-form-label">姓名<span style="color: red">*</span></label>
                    <div class="layui-input-block ">
                        <input type="text" class="layui-input"
                               id="name" name="name" lay-verify="required|name"
                               autocomplete="off" placeholder="请输入姓名" lay-reqtext="姓名为必填项">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">学号<span style="color: red">*</span> </label>
                    <div class="layui-input-block">
                        <input type="number" class="layui-input"
                               id="code" name="code" lay-verify="required|code"
                               placeholder="请输入学号" autocomplete="off" lay-reqtext="学号为必填项">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">性别<span style="color: red">*</span></label>
                    <div class="layui-input-block">
                        <input type="radio" name="sex" value="0" title="男" checked lay-filter="男">
                        <input type="radio" name="sex" value="1" title="女" lay-filter="女">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">年级<span style="color: red">*</span></label>
                    <div class="layui-input-block">
                        <input type="text" class="layui-input"
                               id="grade" name="grade" lay-verify="required"
                               placeholder="请选择入学年份" lay-reqtext="年级为必填项！"
                               autocomplete="off" readonly>
                    </div>
                </div>

                <div class="layui-form-item" id="area-picker">
                    <label class="layui-form-label">籍贯 <span style="color: red">*</span></label>
                    <div class="layui-input-inline" style="width: 200px;">
                        <select name="province" class="province-selector"  lay-filter="province"
                                lay-verify="required" lay-reqtext="籍贯为必填项！">
                            <option value="">请选择省</option>
                        </select>
                    </div>
                    <div class="layui-input-inline" style="width: 200px;">
                        <select name="city" class="city-selector"  lay-filter="city"
                                lay-verify="required" lay-reqtext="籍贯为必填项！">
                            <option value="">请选择市</option>
                        </select>
                    </div>
                    <div class="layui-input-inline" style="width: 200px;">
                        <select name="county" class="county-selector"  lay-filter="county"
                                lay-verify="required" lay-reqtext="籍贯为必填项！">
                            <option value="">请选择区</option>
                        </select>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">手机<span style="color: red">*</span></label>
                    <div class="layui-input-block">
                        <input type="number" class="layui-input"
                               id="phone" name="phone" lay-verify="required|phone"
                               placeholder="请输入手机号码" lay-reqtext="请输入正确的电话号码"
                               autocomplete="off">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">院系<span style="color: red">*</span></label>
                    <div class="layui-input-block">
                        <select id="college" name="college" lay-filter="college" lay-verify="required" lay-reqtext="院系为必填项">
                            <option value="">请选择</option>
                        </select>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">专业<span style="color: red">*</span></label>
                    <div class="layui-input-block">
                        <select id="major" name="major" lay-filter="major" lay-verify="required" lay-reqtext="专业为必填项">
                            <option value="">请选择</option>
                        </select>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">校内职务<span style="color: red">*</span></label>
                    <div class="layui-input-block">
                        <select name="schoolJob" lay-filter="schoolJob"  lay-verify="required" lay-reqtext="校内职务为必填项">
                            <option value="无">无</option>
                            <option value="班干部">班干部</option>
                            <option value="学生会干部">学生会干部</option>
                            <option value="社团干部">社团干部</option>
                        </select>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">加入日期<span style="color: red">*</span></label>
                    <div class="layui-input-block">
                        <input type="text" class="layui-input"
                               id="joinDate" name="joinDate" lay-verify="required"
                               placeholder="请选择年月日" lay-reqtext="加入日期为必填项！"
                               readonly>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">状态<span style="color: red">*</span></label>
                    <div class="layui-input-block">
                        <select id="state" name="state" lay-filter="state" lay-verify="required" lay-reqtext="状态为必填项">
                            <option value="正常">正常</option>
                            <option value="退出">退出</option>
                            <option value="毕业">毕业</option>
                        </select>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">担任的实验室职务<span style="color: red">*</span></label>
                    <div class="layui-input-block">
                        <select id="labJob" name="labJob" lay-filter="labJob"  lay-verify="required" lay-reqtext="实验室职务为必填项">
                            <option value="无">无</option>
                            <option value="组长">组长</option>
                            <option value="项目经理">项目经理</option>
                            <option value="技术总监">技术总监</option>
                            <option value="副秘书长">副秘书长</option>
                            <option value="秘书长">秘书长</option>
                        </select>
                    </div>
                </div>


                <div class="layui-form-item">
                    <label class="layui-form-label">备注</label>
                    <div class="layui-input-block">
            <textarea placeholder="请输入备注信息" class="layui-textarea"
                      id="remark" name="remark" lay-filter="remark"></textarea>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button type="button" id="saveBtn" class="layui-btn layui-btn-normal"
                                lay-submit lay-filter="saveBtn">确认保存</button>
                        <button type="button" id="resetBtn" class="layui-btn layui-btn-normal"
                                lay-filter="resetBtn">重置</button>
                    </div>
                </div>
            </form>

        </div>
    </div>
</div>

<script src="lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="lib/jq-module/paigusu.min.js" charset="utf-8"></script>
<script>
    layui.use(['form','layedit','laydate','layarea'], function () {
        var form = layui.form,
            layedit=layui.layedit,
            layer=layui.layer,
            laydate=layui.laydate,
            initYear,
            layarea = layui.layarea,
            $ = layui.$;

        form.render();

        function formInit() {
            form.val('formFilter',{
                "id":'${member.id}',
                "name":'${member.name}',
                "code":'${member.code}',
                "sex":'${member.sex}',
                "grade":'${member.grade}',
                "phone":'${member.phone}',
                "joinDate":'${member.joinDate}',
                "state":'${member.state}',
                "labJob":'${member.labJob}',
                "schoolJob":'${member.schoolJob}',
                "labJob":'${member.labJob}',
                "remark":'${member.remark}',
            })

            layarea.render({
                elem: '#area-picker',
                data:{
                    province:'${(member.nativePlace).split("-")[0]}',
                    city:'${(member.nativePlace).split("-")[1]}',
                    county:'${(member.nativePlace).split("-")[2]}'
                }
            });

            let url = 'CollegeServlet';
            let params = {method:'search'};
            let successFn = function (res) {
                res = JSON.parse(res);
                let json = res;
                let collegeId='${member.college.id}';
                for (let i=0;i<json.data.length;i++) {

                    if(json.data[i].id==collegeId){
                        $('#college').append("<option value='"+json.data[i].id+"' selected>"+json.data[i].name+"</option>");
                    }else{
                        $('#college').append("<option value='"+json.data[i].id+"'>"+json.data[i].name+"</option>");
                    }
                }

                //页面加载时，把院系的数据查询出来，并赋值给下拉框
                form.render('select');
            }
            $.get(url, params, successFn);


            url = 'MajorServlet';
            params = {method: 'search', collegeSearch: '${member.college.id}'};
            successFn = function (res) {
                res = JSON.parse(res);
                let majors = res.data;
                for (let i = 0; i < majors.length; i++) {
                    if(majors[i].id=='${member.major.id}'){
                        $('#major').append("<option value='"+majors[i].id+"' selected>"+majors[i].name+"</option>");
                    }else{
                        $('#major').append("<option value='"+majors[i].id+"'>"+majors[i].name+"</option>");
                    }
                }
                form.render('select');
            }
            $.get(url, params, successFn);
        }

        formInit();

        form.on('select(college)', function (data) {
            //清空目前专业下拉狂中的数据
            $('#major').empty();
            $('#major').append("<option value=''>请选择</option>");
            let college = data.value;
            let url = 'MajorServlet';
            let params = {method: 'search', collegeSearch: college};
            let successFn = function (res) {
                res = JSON.parse(res);
                let majors = res.data;
                for (let i = 0; i < majors.length; i++) {
                    $('#major').append("<option value='"+majors[i].id+"'>"+majors[i].name+"</option>");
                }
                form.render('select');
            }
            $.get(url, params, successFn);
        });

        $("#name").blur(function(){
            var name = $("#name").val();
            var reg = /^[\u4e00-\u9fa5]{2,5}$/;//正则表达式,2-5个汉字
            if(name.length == 0|| name==null || name == '') {
                layer.msg('姓名为必填项！', {icon: 5});
            }else{
                if(!reg.test(name)) {
                    layer.msg('姓名应为2-5个汉字', {icon: 5});
                }
            }
        });

        $("#code").blur(function(){
            var sno = $("#code").val();
            var reg = /^\d{10}$/;//正则表达式
            if(sno.length == 0|| sno==null || sno == '') {
                layer.msg('学号为必填项', {icon: 5});
            }else{
                if(!reg.test(sno)) {
                    layer.msg('学号应为长位10位的数字', {icon: 5});
                }
            }
        });


        $("#telephone").blur(function(){
            var telephone = $("#telephone").val();
            var reg = /^1[3456789]\d{9}$/;//正则表达式
            if(telephone.length == 0|| telephone==null || telephone == '') {
                layer.msg('手机号码为必填项！', {icon: 5});
            }else{
                if(!reg.test(telephone)) {
                    layer.msg('请输入正确的手机号码！', {icon: 5});
                }
            }
        });


        //监听提交
        form.verify({
            name:function (value) {
                if(/^[\u4e00-\u9fa5]{2,5}$/.test(value)==false){
                    return '请输入真实姓名'
                }
            },
            code:function(value){
                if(value.length<10){
                    return '学号应为长位10位的数字'
                }
            }
        });

        laydate.render({
            elem:'#joinDate',
            trigger:'click', //解决日历一闪而过的问题
        });

        laydate.render({
            elem:'#grade',
            type:'year',
            trigger:'click',
            ready: function(date){ // 控件在打开时触发，回调返回一个参数：初始的日期时间对象
                initYear = date.year;
            },
            change: function(value, date, endDate){ // 年月日时间被切换时都会触发。回调返回三个参数，分别代表：生成的值、日期时间对象、结束的日期时间对象
                var selectYear = date.year;
                var differ = selectYear-initYear;
                if (differ != 15 && differ != -15) {
                    if($(".layui-laydate").length){
                        $("#grade").val(value);
                        $(".layui-laydate").remove();
                    }
                }
                initYear = selectYear;
            }
        })
        form.render();
        // 当前弹出层，防止ID被覆盖
        var parentIndex = layer.index;
        form.on('submit(saveBtn)', function (data) {
            let url = 'MemberServlet?method=modify';
            let successFn = function (res) {
                if (res == "true") {
                    layer.close(parentIndex);
                    layer.msg("修改成功",{icon:1});
                    parent.layui.table.reload('currentTableId');
                }
            }
            $.post(url, data.field, successFn);

        });

        $('#resetBtn').click(function () {
           formInit();
           layer.msg("信息已重置",{icon: 1});
        })


    });
</script>